<!-- eslint-disable no-undef -->
<template>
  <div class="chart1" ref="chart1">
    仪表盘
  </div>
  <div class="chart2" ref="chart2">
    仪表盘
  </div>
  <div class="chart3" ref="chart3">
    仪表盘
  </div>
  <!-- 高德地图 -->
  <div class="map1" id="map1"></div>
  <br>
  <!-- 百度地图 -->
  <baidu-map class="map2" :center="{ lng: 117.33, lat: 31.90 }" :zoom="15" scroll-wheel-zoom="true" defaultAnimation="true">
    <bm-marker :position="{lng: 117.33, lat: 31.907}" :dragging="true" :icon="{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}}"></bm-marker>
  </baidu-map>
</template>

<script>
import * as echarts from 'echarts'
import { mapData } from '../../assets/mapData'
export default {
  name: 'DashBoard',
  data () {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      map1: null
    }
  },
  methods: {
    initChart () {
      this.chart1 = echarts.init(this.$refs.chart1)
      this.chart1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          },
          {
            name: 'Line 3',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220]
          },
          {
            name: 'Line 4',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 135)'
                },
                {
                  offset: 1,
                  color: 'rgb(135, 0, 157)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230, 120]
          },
          {
            name: 'Line 5',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 191, 0)'
                },
                {
                  offset: 1,
                  color: 'rgb(224, 62, 76)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 302, 181, 234, 210, 290, 150]
          }
        ]
      })
    },
    initChart2 () {
      this.chart1 = echarts.init(this.$refs.chart2)
      this.chart1.setOption({
        title: {
          text: '数字天气',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['CityA', 'CityB', 'CityD', 'CityC']
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              { value: 735, name: '北京' },
              { value: 510, name: '上海' },
              { value: 434, name: '广州' },
              { value: 335, name: '深圳' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initChart3 () {
      this.chart3 = echarts.init(this.$refs.chart3)
      echarts.registerMap('chinaMap', mapData)
      this.chart3.setOption({
        title: {
          text: '中国地图',
          left: 'center'
        },
        geo: {
          type: 'map',
          map: 'chinaMap'
        }
      })
    },
    initMap () {
      // eslint-disable-next-line no-unused-vars, no-undef
      const map = new AMap.Map('map1', {
        zoom: 11, // 级别
        center: [117.33, 31.90], // 中心点坐标
        viewMode: '2D' // 使用3D视图
      })
      // eslint-disable-next-line no-undef
      const trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
      })
      map.add(trafficLayer)// 添加图层到地图
      this.map1 = map
    }
  },
  mounted () {
    this.initChart()
    this.initChart2()
    this.initChart3()
    this.initMap()
  }
}
</script>

<style lang="scss" scoped>
.chart1,.chart2,.chart3,.map1,.map2 {
  width: 600px;
  height: 500px;
  margin: 20px auto;
}
</style>
